<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <!-- <link rel="stylesheet" href="css/element.css"> -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
  
</head>
<body>
  <div id="app" v-show="true">
    <el-button @click="submitUpload">提交</el-button>

    <el-upload
      class="avatar-uploader"
      action=""
      :auto-upload="false"
      list-type="picture-card"
      :on-change="handleAvatarChange"
      :on-remove="handleAvatarRemove"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

  </div>
	<!-- :auto-upload="false" -->
</body>
  <script src="js/jquery.js"></script>
  <!-- import Vue before Element -->
  <script src="js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="js/element.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
          visible: false,
          imageUrl: '',
          fileList: []
         // file:''
        }
      },
      methods:{
        //提交
        submitUpload:function(){
          console.log(this.fileList)
        },
        //转base64
        getBase64:function (file) {
          return new Promise(function (resolve, reject) {
            let reader = new FileReader()
            let imgResult = ''
            reader.readAsDataURL(file)
            reader.onload = function () {
              imgResult = reader.result
            }
            reader.onerror = function (error) {
              reject(error)
            }
            reader.onloadend = function () {
              resolve(imgResult)
            }
          })
        },
        //添加数据
        handleAvatarChange:function(file,fileList) {
          this.getBase64(file.raw).then(res => {
            this.fileList.push({
              name:file.name,
              id:file.uid,
              base64:res,
              file:file
            });
          })
        },
        //删除数据
        handleAvatarRemove:function(file){
          var newFileList = JSON.parse(JSON.stringify(this.fileList));
          this.fileList.forEach(function(item,index){
            if(item.id == file.uid){
              newFileList.splice(index,1);
            }
          });
          this.fileList = newFileList;
        },
        //验证
        beforeAvatarUpload:function(file) {
         console.log(file)
					console.log('上传检查')
          const isJPG = file.type === 'image/jpeg';
          const isPng = file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isJPG && !isPng) {
            this.$message.error('上传头像图片只能是 JPG或png 格式!');
            return false;
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            return false;
          }
          return true;
        }
      }
      
    })
  </script>



<style>
  /* .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  } */
</style>
</html>